<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <link rel="icon" href="/favicon.ico" />
  <title>星售站</title>
  <!--[if lt IE 11
      ]><script>
        window.location.href = '/html/ie.html';
      </script><!
    [endif]-->
  <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
    }

    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
      background: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .loading-container {
      width: 400px;
      padding: 40px;
      background: #ffffff;
      border-radius: 24px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
    }

    .loading-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      position: relative;
      z-index: 1;
    }

    .logo-container {
      position: relative;
      width: 120px;
      height: 120px;
    }

    .logo-circle {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(135deg, #2196f3, #1976d2);
      animation: rotate 3s linear infinite;
    }

    .logo-circle::before {
      content: '';
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2196f3, #1976d2);
      opacity: 0.3;
      animation: pulse 2s ease-out infinite;
    }

    .logo-rings {
      position: absolute;
      width: 100%;
      height: 100%;
      animation: rotate 3s linear infinite reverse;
    }

    .ring {
      position: absolute;
      border: 2px solid transparent;
      border-radius: 50%;
      animation: ringPulse 2s ease-out infinite;
    }

    .ring-1 {
      width: 100%;
      height: 100%;
      border-top-color: #2196f3;
      animation-delay: 0s;
    }

    .ring-2 {
      width: 80%;
      height: 80%;
      top: 10%;
      left: 10%;
      border-right-color: #1976d2;
      animation-delay: 0.3s;
    }

    .ring-3 {
      width: 60%;
      height: 60%;
      top: 20%;
      left: 20%;
      border-bottom-color: #2196f3;
      animation-delay: 0.6s;
    }

    .logo-inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 80%;
      background: #ffffff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .logo-pulse {
      width: 60%;
      height: 60%;
      background: linear-gradient(135deg, #2196f3, #1976d2);
      border-radius: 50%;
      animation: pulse 2s ease-out infinite;
    }

    .logo-shine {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg,
          transparent 0%,
          rgba(255, 255, 255, 0.8) 50%,
          transparent 100%);
      animation: shine 3s linear infinite;
    }

    .loading-info {
      text-align: center;
      width: 100%;
    }

    .loading-title {
      font-size: 28px;
      font-weight: 600;
      color: #1976d2;
      margin-bottom: 20px;
      font-family: 'Microsoft YaHei', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .title-dot {
      animation: dotPulse 1.5s ease-in-out infinite;
    }

    .loading-progress {
      margin: 20px 0;
      position: relative;
    }

    .progress-bar {
      width: 100%;
      height: 4px;
      background: #e0e0e0;
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 15px;
      position: relative;
    }

    .progress-fill {
      width: 30%;
      height: 100%;
      background: linear-gradient(90deg, #2196f3, #1976d2);
      border-radius: 2px;
      animation: progress 2s ease-in-out infinite;
      position: relative;
    }

    .progress-glow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
      animation: glow 2s linear infinite;
    }

    .loading-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 15px;
    }

    .loading-dots span {
      width: 8px;
      height: 8px;
      background: #2196f3;
      border-radius: 50%;
      animation: bounce 1.4s infinite ease-in-out;
    }

    .loading-dots span:nth-child(1) {
      animation-delay: -0.32s;
    }

    .loading-dots span:nth-child(2) {
      animation-delay: -0.16s;
    }

    .loading-text {
      font-size: 16px;
      color: #666;
      margin-top: 15px;
      font-family: 'Microsoft YaHei', sans-serif;
      position: relative;
      display: inline-block;
    }

    .loading-text::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, #2196f3, transparent);
      animation: textLine 2s ease-in-out infinite;
    }

    .loading-decoration {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .decoration-line {
      position: absolute;
      background: linear-gradient(90deg, transparent, rgba(33, 150, 243, 0.1), transparent);
      height: 1px;
      width: 100%;
    }

    .line-1 {
      top: 20%;
      animation: lineMove 3s ease-in-out infinite;
    }

    .line-2 {
      bottom: 20%;
      animation: lineMove 3s ease-in-out infinite reverse;
    }

    .decoration-dot {
      position: absolute;
      width: 6px;
      height: 6px;
      background: #2196f3;
      border-radius: 50%;
      opacity: 0.3;
    }

    .dot-1 {
      top: 30%;
      left: 10%;
      animation: dotFloat 4s ease-in-out infinite;
    }

    .dot-2 {
      bottom: 30%;
      right: 10%;
      animation: dotFloat 4s ease-in-out infinite reverse;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.1);
        opacity: 0.8;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes ringPulse {
      0% {
        transform: scale(1);
        opacity: 0.5;
      }

      50% {
        transform: scale(1.1);
        opacity: 0.8;
      }

      100% {
        transform: scale(1);
        opacity: 0.5;
      }
    }

    @keyframes shine {
      0% {
        transform: translate(-100%, -100%) rotate(45deg);
      }

      100% {
        transform: translate(100%, 100%) rotate(45deg);
      }
    }

    @keyframes progress {
      0% {
        width: 0%;
      }

      50% {
        width: 70%;
      }

      100% {
        width: 100%;
      }
    }

    @keyframes glow {
      0% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(100%);
      }
    }

    @keyframes bounce {

      0%,
      80%,
      100% {
        transform: scale(0);
      }

      40% {
        transform: scale(1.0);
      }
    }

    @keyframes dotPulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.3;
      }
    }

    @keyframes textLine {
      0% {
        transform: scaleX(0.3);
        opacity: 0;
      }

      50% {
        transform: scaleX(1);
        opacity: 1;
      }

      100% {
        transform: scaleX(0.3);
        opacity: 0;
      }
    }

    @keyframes lineMove {
      0% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(100%);
      }
    }

    @keyframes dotFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-20px);
      }
    }

    .loaded #loader-wrapper {
      visibility: hidden;
      opacity: 0;
      transition: all 0.5s ease-out;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="loader-wrapper">
      <div class="loading-container">
        <div class="loading-content">
          <div class="logo-container">
            <div class="logo-circle">
              <div class="logo-inner">
                <div class="logo-pulse"></div>
                <div class="logo-shine"></div>
              </div>
              <div class="logo-rings">
                <div class="ring ring-1"></div>
                <div class="ring ring-2"></div>
                <div class="ring ring-3"></div>
              </div>
            </div>
          </div>
          <div class="loading-info">
            <h2 class="loading-title">
              <span class="title-text">智能售货系统</span>
              <span class="title-dot">.</span>
            </h2>
            <div class="loading-progress">
              <div class="progress-bar">
                <div class="progress-fill"></div>
                <div class="progress-glow"></div>
              </div>
              <div class="loading-dots">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
            <p class="loading-text">正在加载系统资源，请稍候...</p>
          </div>
          <div class="loading-decoration">
            <div class="decoration-line line-1"></div>
            <div class="decoration-line line-2"></div>
            <div class="decoration-dot dot-1"></div>
            <div class="decoration-dot dot-2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="module" src="/src/main.ts"></script>
  <script>
    // 添加页面加载完成的处理
    window.addEventListener('load', function () {
      document.body.classList.add('loaded');
    });
  </script>
</body>

</html>